<template>
<view class="container">
  <view class="tabs">
    <view class="tab-item" :class="[tabType == 1 ?'tab-item-active':'']" @click="tabType = 1">仓储详情</view>
    <view class="tab-item" :class="[tabType == 2 ?'tab-item-active':'']" @click="tabType = 2">发货历史</view>
  </view>
  <view class="content">
    <view class="w-list" v-show="tabType == 1">
      <template v-if="Object.keys(objData).length > 0">
        <view class="w-item" v-for="(key,i) in Object.keys(objData)" :key="i">
          <view class="title">
            {{ objData[key][0].goodsName }}
            <span class="speci">规格：{{ objData[key][0].specifications }}</span>
          </view>
          <view class="o-list">
            <u-checkbox-group   placement="column" @change="(e)=>{checkboxChange(key,e)}">
              <view  v-for="(item1,j) in objData[key]" :key="j" >
                <view class="o-item" @click="goDetail(item1.orderId)">
                  <label class="item-checkbox">
                    <u-checkbox :checked="false" :name="j"></u-checkbox>
                  </label>
                  <view class="orderId">订单号：{{ item1.orderSn }}</view>
                </view>
                <view class="o-item o-item1" >
                  <view class="info">商品数量  <span class="num">{{ item1.number }}</span></view>
                </view>
                <view class="o-item o-item1" >
                  <view class="info">已提货数量  <span class="num">{{ item1.fetchNumber }}</span></view>
                </view>
                <view class="o-bottom">
                  <number-box @change="(e)=>change(key,j,e)" :min="item1.min || 1" :max="item1.max" :step="1"
                              :step-strictly="true" :positive-integer="true">
                  </number-box>
                </view>
              </view>

            </u-checkbox-group>
          </view>
        </view>
      </template>
      <empty v-else :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无数据" />
    </view>
    <view class="h-list" v-show="tabType == 2">
      <template v-if="historylist.length > 0">
        <view class="h-item" v-for="(history,i) in historylist" :key="i">
          <view class="h-row " v-for="(item,j) in history" :key="j">
            <span class="label title">{{item.goodsName}}</span><span class="value">提货数量：{{item.fetchNumber}}</span>
          </view>
          <view class="h-row"><span class="label">快递编号：</span><span class="value">{{history[0].shipSn}}</span></view>
          <view class="h-row"><span class="label">提货码：</span><span class="value">{{history[0].fetchCode}}</span></view>
          <view class="h-row"><span class="label">收货信息：</span><span class="value">{{history[0].consignee}},{{history[0].mobile}},{{history[0].address}}</span></view>
          <view class="h-row"><span class="label">状态：</span><span class="value title" style="color: #010812">{{getStatus(history[0].deliveryStatus)}}</span></view>
          <view class="h-row"><span class="label">快递公司：</span><span class="value">{{getChannel(history[0].shipChannel)}}</span></view>
          <view class="h-row"><span class="label">发货时间：</span><span class="value">{{history[0].shipTime}}</span></view>
          <view class="h-row"><span class="label">备注：</span><span class="value">{{history[0].remark}}</span></view>
        </view>
      </template>
      <empty v-else :isLoading="isLoading" :custom-style="{ padding: '180rpx 50rpx' }" tips="暂无数据" />
    </view>
  </view>
  <view class="bottom"  v-show="tabType == 1">
      <view class="btn" @click="submit">我要提货</view>
  </view>
</view>
</template>

<script>
import NumberBox from '../number-box'
import storage from '@/utils/storage'
export default {
  components: {
    NumberBox
  },
  data(){
    return {
      isLoading: true,
      tabType:1, // 1 仓储详情 2 发货历史
      objData:{},
      list:[],
      historylist:[],
      selectNum:1,
      minBuyNum:1,
      maxBuyNum:10,
      stepBuyNum:1,
      stepStrictly:true,
      form: {}
    }
  },
  onLoad(){
  },
  onShow(){
    // this.checkboxValue1 = []
    this.getList()
    storage.remove('warehouseSubmit')
  },
  watch:{
    tabType(val){
      if(val == 2){
        this.getHistory()
      }
    }
  },
  methods:{
    goDetail(id){
      this.$navTo('page_work/user/orderDetail', {orderId:id})
    },
    getStatus(val){
      switch (val){
        case 1:
          return '待发货'
        case 2:
          return '已发货'
        case 3:
          return '用户确认收货'
        case 4:
          return '系统确认收货'
        default:
          return ''
      }
    },
    getChannel(shipChannel){
      const vendors = {
        'ZHITI': '自提',
        'HTKY': '百世快递',
        'YZBK': '邮政国内标快',
        'ZTO': '中通快递',
        'YTO': '圆通速递',
        'YD': '韵达速递',
        'YZPY': '邮政快递包裹',
        'EMS': 'EMS',
        'DBL': '德邦快递',
        'FAST': '快捷快递',
        'ZJS': '宅急送',
        'TNT': 'TNT快递',
        'UPS': 'UPS',
        'DHL': 'DHL',
        'FEDEX': 'FEDEX联邦(国内件)',
        'FEDEX_GJ': 'FEDEX联邦(国际件)',
      }
      if(vendors[shipChannel]){
        return vendors[shipChannel]
      }else{
        return ''
      }
    },
    getList(){
      this.objData = {}
      this.isLoading = true;
      this.$request.get('wx/warehouse/list').then(({data}) => {
        let objData = data.items;
        let obj = {}
        Object.keys(objData).forEach((key,i)=>{
          let item = objData[key]
          let newKey = `${item[0].goodsSn}-${item[0].goodsName}-${item[0].productId}`
          if(!obj[newKey]){
            obj[newKey] = []
          }
          item.forEach((item1,j)=>{
            obj[newKey][j] = {
              ...item1,
              checked:false,
              num:1,
              min:1,
              max:item1.remainNumber,
            }
          })
        })
        console.log(obj)
        this.objData = obj
      }).catch(err=>{
        this.$toast(err.errmsg)
      }).finally(()=>{
        this.isLoading = false;
      })
    },
    getHistory(){
      this.isLoading = true;
      this.$request.get('wx/warehouse/deliveryHistory').then(({data}) => {
        let arr = []
        Object.values(data.items).forEach(item=>{
          arr.push(item)
        })
        this.historylist = arr
      }).catch(err=>{
        this.$toast(err.errmsg)
      }).finally(()=>{
        this.isLoading = false;
      })
    },
    change(key,j,e){
      this.objData[key][j].num = e.value
    },
    checkboxChange(key,val){
      if(val.length) {
        this.objData[key].forEach((item,i) => {
          this.objData[key][i].checked = false
        })
        val.forEach(item => {
          this.objData[key][item].checked = true
        })
      }else{
        this.objData[key].forEach((item,i) => {
          this.objData[key][i].checked = false
        })
      }
    },
    submit(){
      let checkedObj = []
      Object.keys(this.objData).forEach(key=>{
        this.objData[key].forEach(item1=>{
          if(item1.checked){
            if(!checkedObj[key]){
              checkedObj[key] = []
            }
            checkedObj[key].push(item1)
          }
        })
      })
      if(Object.values(checkedObj).length == 0){
        this.$toast('请选择提货商品')
        return
      }
      let list = []
      Object.values(checkedObj).forEach(item=>{
        list.push({
          name:item[0].goodsName,
          list:item
        })
      })
      // console.log(list)
      storage.set('warehouseSubmit', list)
      this.$navTo('page_work/user/warehouseSubmit')
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding: 40rpx 0;
  .tabs{
    display: flex;
    align-items: center;
    gap:20rpx;
    padding: 0 40rpx;
    margin-bottom: 20rpx;
    .tab-item{
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
      padding: 12rpx 20rpx;
      border: 1rpx solid #999999;
      border-radius: 10rpx
    }
    .tab-item-active{
      color: #1777FF;
      border: 1rpx solid #1777FF;
      background: #E2F0FC;
    }
  }
  .content{
    padding: 0 40rpx;
    .w-list{
      margin-top: 40rpx;
      .w-item{
        margin-bottom: 40rpx;
        .title{
          font-size: 28rpx;
          font-weight: bold;
          color: #242323;
          display: flex;
          align-items: center;
          .speci{
            margin-left: 20rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
          }
        }
        .o-list{
          border-bottom: solid 1px #ECECEC;
          .checkbox-list{
            display:block;
          }
          .o-item{
            display: flex;
            align-items: center;
            //justify-content: space-between;
            padding: 20rpx 0;
            gap: 16rpx;
            .item-checkbox{
              width: 36rpx;
              height: 34rpx;
              padding-right: 10rpx;
            }
            .orderId{
              font-size: 26rpx;
              font-weight: 400;
              color: #000000;
            }
            .info{
              font-size: 13px;
              font-weight: 400;
              color: #000000;
              .num{
                margin-left: 8rpx;
                color:#999999;
              }
            }
          }
          .o-item1{
            margin-left: 60rpx;
          }
          .o-bottom{
            margin-top: -74rpx;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding:10rpx 0 20rpx ;
            gap: 16rpx;
            /deep/ .number-box{
              border-radius: 8rpx;
              border:solid 1px #A8A5A5;
              background: #FFF;
              .u-icon-minus,.u-icon-plus,.u-number-input{
                background: none !important;
              }
              .u-icon-minus{
                border-right: solid 1px #A8A5A5;
              }
              .u-icon-plus{
                border-left: solid 1px #A8A5A5;
              }
            }
          }

        }
      }
    }
    .h-list{
      .h-item{
        border-bottom: solid 1px #ECECEC;
        padding: 20rpx 0;
        .h-row{
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          font-size: 28rpx;
          font-weight: 500;
          color: #242323;
          padding: 12rpx;
          .label{
            flex-shrink: 0;
          }
          .value{
            text-align: right;
            margin-left: 140rpx;
            color:#A8A5A5;
          }
        }
        .title{
          font-weight: bold;
        }
      }
    }
  }
  .bottom{
    position: fixed;
    bottom: 100rpx;
    padding: 0 40rpx;
    width: 100%;
    height: 80rpx;
    background: #FFF;
    box-sizing: border-box;
      .btn{
        font-size: 28rpx;
        border-radius: 20rpx;
        font-weight: 500;
        color: #FFF;
        background: #1777FF;
        padding: 14rpx 30rpx;
        flex: 1;
        height: 80rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

  }
}
</style>